<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script setup lang="ts">
</script>

<style>
/* 全局 box-sizing 初始化 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* html + body 初始化 */
html, body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/* 主容器布局 */
#app {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Vue根组件样式 */
.app {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--text-color);
  line-height: 1.6;
  background-color: #f5f7fa;
}

/* 通用容器 */
.container {
  margin: 0 auto;
  padding: 0 1rem;
}

/* 主题变量 */
:root {
  --primary-color: #409eff;
  --success-color: #67c23a;
  --warning-color: #e6a23c;
  --danger-color: #f56c6c;
  --text-color: #2c3e50;
  --border-radius: 8px;
  --transition: all 0.3s ease;
}

</style>
